<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Moque</title>
<style>
    html, body{
        margin: 0;
        padding: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: auto;
    }

    pre, ul, input,select{
        margin: 0;
        padding: 0;
    }
    input,select{
        background-color: transparent;
        border: none;
        outline: none;
    }
    a{
        color:black;
    }
    label, .label{
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    html{
        font-size: 4vh;
    }
    body{
        margin: 0 auto;
        min-width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }

    ux-page {
        width: 100%;
        height: 100%;
        background-color: #505050;
    }

    #page-game {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }

    .top-line {
        width: 100%;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 1rem;
        background-color: #303030;
        color: #909090;
        text-align: center;
        border-bottom: 1px solid gray;
    }

    #ai-status {
        height: 1.2rem;
        line-height: 1.2rem;
        color: #aaaaaa;
    }

    #game-area {
        flex: 1;
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: center;
        align-content: center;
        align-items: center;
        grid-gap: 1pt;
    }
    .pbox {
        background-color: dimgray;
        color: dimgray;
        cursor: pointer;
        transition: 0.5s;
        width: 3.6vh;
        height: 5vh;
        line-height: 5vh;
        text-align: center;
        font-size: 100%;
    }
    .pbox:hover {
        background-color: #aaaaaa;
    }

    .game-tools {
        background-color: #505050;
        width: 100%;
        height: 6vh;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        font-size: 1rem;
        user-select: none;
    }

    .game-tool, .game-tool select {
        color: #999999;
        cursor: pointer;
    }
    .game-tool:hover {
        color: #f0f0f0;
        transition: 0.5s;
    }
    .game-tool.op {
        color: #6f6f6f;
    }
    .game-tool.op-active {
        color: #bbbbbb;
    }

    ux-template {
        display: none;
    }
</style>
</head>
<body>
<ux-page id="page-game">
    <div id="game-status" class="top-line"></div>
    <div id="ai-status" class="top-line"></div>
    <div id="game-area"></div>
    <div class="game-tools">
        <div class="game-tool" id="cmd-reset">重开</div>
        <div class="game-tool op" id="cmd-a">P</div>
        <div class="game-tool op" id="cmd-b">C</div>
        <div class="game-tool op" id="cmd-c">G</div>
        <div class="game-tool op" id="cmd-d">H</div>
    </div>
</ux-page>
<ux-template id="pbox">
    <div class="pbox" style="grid-row:[ROW]; grid-column:[COL];"></div>
</ux-template>
</body>
<script>document.write(((a,b)=>(`${a}t type="module" src="./main.js?fuck=${Date.now()}">${b}t>`))("<scrip","</scrip"))</script>
</html>
